<template>
  <el-card class="box-card">
    <div slot="header" style="display: flex; justify-content: space-between;align-items: center">
      <h3>Form表单</h3>
    </div>
    <div>
      <!-- el-form表单的父组件 :model="数据对象名" :rules="变量" ref="表单名" label-width="" class="" -->
      <el-form :model="obj" :rules="rules">
        <!-- el-form-item表单的子组件 label="子组件的标题" prop="校验规则的属性名"-->
        <!--这个prop="username"是rules对象中的属性, 但是这里不需要写rules.username-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="obj.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="obj.password" placeholder="长度在5-10个字符"/>
        </el-form-item>
        <el-form-item label="单选按钮基础用法">
          <!-- el-radio身上的label用于指定与变量(obj.radio1)绑定的值 -->
          <!-- 用户点选了选项1, 则obj.radio1=0 -->
          <!-- 用户点选了选项2, 则obj.radio1=2 -->
          <el-radio v-model="obj.radio1" label="0">选项1</el-radio>
          <el-radio v-model="obj.radio1" label="1">选项2</el-radio>
        </el-form-item>
        <!--      {{ obj.radio1 }}-->
        <el-form-item label="单选按钮组">
          <!-- 变量绑定在组的身上,每一个单选按钮用:label绑定值-->
          <el-radio-group v-model="obj.radio2">
            <el-radio :label="3">备选项1</el-radio>
            <el-radio :label="6">备选项2</el-radio>
            <el-radio :label="9">备选项3</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--      {{ obj.radio2 }}-->
        <el-form-item label="按钮形式的单选">
          <!-- 组身上可以设置尺寸 size="medium|small|mini" -->
          <el-radio-group v-model="obj.radio3" size="mini">
            <!-- label指定的内容既是按钮上的文字,也是与变量绑定的值 -->
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!--      {{ obj.radio3 }}-->
        <el-form-item label="带有边框">
          <el-radio v-model="obj.radio4" label="1" border>备选项1</el-radio>
          <el-radio v-model="obj.radio4" label="2" border>备选项2</el-radio>
        </el-form-item>
        <!--      {{ obj.radio4 }}-->
        <el-form-item label="多选按钮的全选(indeterminate状态)">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
// 在Vue实例对象的外面定义一个全局常量,用于存储城市选项数组
const cityOptions = ['北京', '上海', '广州', '深圳']
export default {
  name: "Form01",
  data() {
    return {
      // 是否全选:默认是false
      checkAll: false,
      // 是否为不确定状态: 默认是true
      isIndeterminate: true,
      // 存储所有选中的城市的数组
      checkedCities: ['上海', '北京'],
      // 所有城市的数组, 把全局的cityOptions赋给cities
      cities: cityOptions,
      // 绑定在表单身上的对象 obj | item | car | user | salesman
      obj: {
        username: null,
        password: null,
        radio1: null,
        radio2: null,
        radio3: null,
        radio4: null
      },
      // 校验规则对象 通常命名为rules
      rules: {
        // username属性的取值是一个数组, 在这个数组中定义用户名的校验规则
        // 为什么是数组? 因为每个校验规则也是一个对象,一个属性可以有多个校验规则
        username: [
          // required:true是非空校验(label旁边会显示红色*),message指定提示信息,trigger指定触发校验的事件名 (blur是失去焦点事件)
          { required:true, message:'用户名不能为空', trigger:'blur' }
        ],
        password: [
          { required:true, message:'密码不能为空', trigger:'blur' },
          { min:5, max:10, message: '长度在5-10个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 处理全局按钮改变事件的函数
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    // 处理某一个多选按钮改变事件的函数
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
}
</script>

<style scoped>

</style>
